<template>
  <div class="table-container">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>企业微信员工列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-search">
      <el-button type="success" @click="toAddQyStaff">新增企业微信员工</el-button>
      <el-row>
        <el-input
          style="width: 200px;margin-right: 10px"
          placeholder="请输入员工信息查询"
          v-model="keyword"
          clearable
          @clear="resetData"
        >
        </el-input>
        <el-button type="primary" @click="resetData" >搜索</el-button>
      </el-row>
    </div>
    <div class="table-content">
      <el-table
        border
        empty-text="当前数据空空如也"
        ref="multipleTable"
        :data="offerList"
        tooltip-effect="dark"
        style="width: 100%"
        @select="selectedRow"
        @select-all="selectedAll"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="qy_wechat_id" label="ID" width="100"></el-table-column>
        <!-- <el-table-column prop="room_type" label="工号" width="100"></el-table-column> -->
        <!-- <el-table-column prop="id" label="企业微信号" width="auto"></el-table-column> -->
        <el-table-column prop="name" label="员工名" width="auto"></el-table-column>
        <!-- <el-table-column prop="username" label="微信号" width="auto"></el-table-column> -->
        <el-table-column prop="mobile" label="手机号" width="auto"></el-table-column>
        <el-table-column prop="mobile" label="状态" width="auto">
          <template slot-scope="scope">
            <p>{{scope.row.status==1?'已激活':scope.row.status==2?'已禁用':scope.row.status==4?'未激活':scope.row.status==5?'退出企业':''}}</p>
          </template>
		    </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="margin-right: 5px"
              @click="toEdit(scope.$index, scope.row)">详情
            </el-button>
            <el-button slot="reference" @click="delOffer(scope.$index, scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-nav">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="新增企业微信员工"
      :visible.sync="dialogVisible"
      @closed="closedFn"
      width="50%">
      <div class="houseHoldBox">
          <div class="inputBox">
              <el-input type="text" v-model="staffInput" clearable @clear="searchStaff" placeholder="请输入员工名字"></el-input>
              <el-button type="primary" @click="searchStaff">搜索</el-button>
          </div>
          <div class="shopBox">
              <div class="item" v-for="(item,index) in addStaffList" :key="index">
                  <el-radio v-model="staffRadio" :label="item.user_id" >
                      <div class="radioBox">
                          <img :src="item.headimg?item.headimg:''" mode="" />
                          <div class="title">{{item.realname}}</div>
                      </div>
                  </el-radio>
              </div>
              <div class="openMore" v-if="addStaffList.length" @click="moreBtnHold">{{moreText}}</div>
          </div>
          <div class="notList" v-if="searchStaffList">暂无数据~</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addQySubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        pageSize: 10,
        total: 0,
        keyword: '',
        offerList: [],
        multipleSelection: [],

        dialogVisible:false,
        addStaffList:[],
        staffInput:'',
        staffRadio:'',
        searchStaffList:false,
        moreText:'点击加载更多',
        searchPage:1,
        searchPageSize:10
      }
    },
    mounted() {
      this.queryList();
    },
    methods: {
        changeTime(row, column, cellValue, index){
            if(cellValue){
                return this.$moment(cellValue*1000).format('yyyy-MM-DD HH:ss')
            }
        },
        changeQy(row , column, cellValue,index){
          if(cellValue){
            return '有'
          }else{
            return '无'
          }
        },

        // 对话框点击加载更多
        moreBtnHold(){
          this.searchPage++
          let params = {
            page:this.searchPage,
            pagesize:this.searchPageSize,
            is_staff:1,
            is_qy:2,
            search:this.staffInput
          }
          console.log('新增企业微信员工搜索');
          this.$http.post('/api/root/Staff/StaffList',params).then(res=>{
            console.log(res,'新增企业微信员工列表');
            if(res.code==1){
              if(!res.data.list.length){
                this.moreText = '没有更多了~'
              }
              this.addStaffList = this.addStaffList.concat(res.data.list);
            }
          })
        },
        // 新增企业员工搜索按钮
        searchStaff(){
          this.searchPage = 1
          this.moreText = '点击加载更多'
          this.searchStaffList = false
          let params = {
            page:this.searchPage,
            pagesize:this.searchPageSize,
            is_staff:1,
            is_qy:2,
            search:this.staffInput
          }
          console.log('新增企业微信员工搜索');
          this.$http.post('/api/root/Staff/StaffList',params).then(res=>{
            console.log(res,'新增企业微信员工列表');
            if(res.code==1){
              if(!res.data.list.length){
                this.searchStaffList = true
              }
              if(res.data.list.length<10){
                this.moreText = '没有更多了'
              }
              this.addStaffList = res.data.list?res.data.list:[];
            }
          })
        },

        //   删除按钮
        delOffer(index,row){
            console.log(index,row,'1111');
            this.$confirm('此操作将删除该员工, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.toDelete(row.user_id,row.qy_wechat_id)
            })
        },

        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },

        // 新增企业微信员工
        toAddQyStaff(){
          this.dialogVisible = true
        },

        // 编辑按钮
        toEdit(index,row){
          console.log(row,'员工==');
          let data = encodeURIComponent(JSON.stringify(row))
          this.$router.push({name:'staffQyDetail',query:{data}})
        },

        // 确认报价
        handleOffer(index,row){
            this.$confirm('确认完成该报价吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                this.$http.post('/api/root/OnekeyOffer/changeStatus',{status:2,id:row.id}).then(res=>{
                    if(res.code==1){
                        this.$message.success('操作成功')
                        this.queryList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            })
        },

        // 取消报价
        toCanael(index,row){
            this.$confirm('确认取消该报价吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                this.$http.post('/api/root/OnekeyOffer/changeStatus',{status:0,id:row.id}).then(res=>{
                    if(res.code==1){
                        this.$message.success('操作成功')
                        this.queryList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            })
        },

        // 对话框确定
        addQySubmit(){
          console.log(this.staffRadio,'选择的员工');
          if(!this.staffRadio){
            this.$message.warning('请选择员工')
            return
          }
          this.$http.post('/api/root/qywx/regQyWechat',{choose_id:this.staffRadio}).then(res=>{
            console.log(res,'新增企业微信员工结果');
            if(res.code==1){
              this.dialogVisible = false
              this.$message.success('添加成功')
              this.queryList()
            }else{
              this.$message.warning(res.msg)
            }
          })
        },
        // 关闭对话框回调
        closedFn(){
          this.staffRadio = ''
          this.addStaffList = []
          this.staffInput = ''
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.queryList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.queryList();
        },

        queryList() {
            this.$http.get('/api/root/qywx/getQyUserList', {
                page: this.page,
                pagesize: this.pageSize
            }).then(res => {
				console.log(res,'员工列表')
                if (res.code == 1) {
                    this.offerList = res.data.data?res.data.data:[];
                    this.total = res.data.count;
                }
            })
        },
        toDelete(id_lst,qyUserId) {
            this.$http.post('/api/root/qywx/delQyUser', {
                choose_id: id_lst,
                qy_user_id: qyUserId
            }).then(rest => {
                if (rest.code == 1) {
                    this.queryList();
                    this.multipleSelection = [];
                    this.$message.success('删除成功');
                } else {
                    this.$message.error(rest.msg);
                }
            })
        }
        ,
        resetData(){
            this.page = 1;
            this.queryList();
        }
    }
  }
</script>
<style lang="less" scoped>
  @import 'index.less';
</style>
